<template>
  <div>
    <img src="http://localhost:7001/pic/test/ssss.png" alt="图片缺失" />
    <img src="http://localhost:7001/pic/test/sssss.png" alt="图片缺失" />
    <ElDivider>图片回显</ElDivider>
    <template v-for="(e, i) in urls" :key="i">
      <img :src="'http://localhost:7001/pic' + e" />
    </template>
  </div>
  <ElDivider>图片回显 CSS</ElDivider>
  <!-- style="background-image: url('http://localhost:7001/pic/test/sssss.png')" -->
  <!-- <template v-for="(e, i) in 3" :key="i">
    <div
      class="show-pic"
      :style="{ backgroundImage: 'url(http://localhost:7001/pic/test/sssss.png)' }"
    ></div> 
   </template> -->
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export default defineComponent({
  name: 'PractiseFour',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      bills: [2, 4, 5],
      urls: ['/test/ssss.png', '/test/sssss.png', '/test/ssssss.png']
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
img {
  width: 100px;
  height: 80px;
  object-fit: contain;
  padding: 2px;
}
.show-pic {
  width: 100px;
  height: 80px;
  padding: 2px;
  // background-image: url('http://localhost:7001/pic/test/ssss.png');
  background-size: contain;
}
</style>
